<template>
  <div class="another-cascade">
    <ul class="cascade-ul brand">
      <el-row class="ul-first">
        <el-col :span="24"
                class="ul-search">
          <el-input placeholder="请输入品牌名称"
                    size="mini"
                    v-model="brandName">
            <el-button slot="append"
                       icon="el-icon-search"
                       @click="getBrandList"></el-button>
          </el-input>
        </el-col>
      </el-row>
      <li v-for="(item, key) in brandList"
          :key="key"
          :class="key == 0? (brandItemClass == key?'cascade-ul-item brand first is-active':'cascade-ul-item brand first') : (brandItemClass == key?'cascade-ul-item brand is-active':'cascade-ul-item brand') "
          @click="chooseBrand(item, key)">
        <el-tooltip effect="dark"
                    :content="item.brandName"
                    placement="top-start"><span>{{ item.brandName }}</span></el-tooltip>
      </li>
    </ul>
    <template v-if="seriesFlag">
      <ul class="cascade-ul">
        <li v-for="(item, key) in seriesList"
            :key="key"
            :class="seriesItemClass == key?'cascade-ul-item is-active':'cascade-ul-item'"
            @click="chooseSeries(item, key)">
          <el-tooltip effect="dark"
                      :content="item.seriesName"
                      placement="top-start"><span>{{ item.seriesName }}</span></el-tooltip>
        </li>
      </ul>
    </template>
    <template v-if="modelFlag">
      <ul class="cascade-ul">
        <li v-for="(item, key) in modelList"
            :key="key"
            :class="modelItemClass == key?'cascade-ul-item is-active':'cascade-ul-item'"
            @click="chooseModel(item, key)">
          <el-tooltip effect="dark"
                      :content="item.modelName"
                      placement="top-start"><span>{{ item.modelName }}</span></el-tooltip>
        </li>
      </ul>
    </template>
    <template v-if="colorFlag">
      <ul class="cascade-ul">
        <el-checkbox :indeterminate="isIndeterminate"
                     v-model="checkAll"
                     @change="handleCheckAllChange">全选</el-checkbox>
        <el-checkbox-group v-model="checkedColors"
                           @change="checkedColor">
          <li v-for="(item, key) in colorList"
              :key="key"
              class="cascade-color-item">
            <el-checkbox :label="item"></el-checkbox>
          </li>
        </el-checkbox-group>
      </ul>
    </template>
  </div>
</template>

<style lang="scss">
.ul-first {
  background-color: #fff;
  position: fixed;
  width: 243px;
  z-index: 1009;
}
.ul-search {
  padding: 4px 20px 10px 20px;
  border-bottom: 1px solid #f3f3ee;
}
.another-cascade {
  white-space: nowrap;
  background: #fff;
}
.cascade-ul {
  display: inline-block;
  vertical-align: top;
  height: 220px;
  overflow: auto;
  border-right: 1px solid #e4e7ed;
  background-color: #fff;
  box-sizing: border-box;
  margin: 0;
  padding: 6px 0;
  min-width: 160px;
  max-width: 250px;
}
.cascade-ul.brand {
  width: 250px;
  padding: 0 0 6px 0;
}
.cascade-ul-item:hover {
  background-color: #f5f7fa;
}
.cascade-ul-item.is-active {
  color: #409eff;
}
.cascade-ul-item,
.cascade-color-item {
  font-size: 14px;
  padding: 8px 20px;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #606266;
  height: 34px;
  line-height: 1.5;
  box-sizing: border-box;
  cursor: pointer;
  outline: none;
}
.cascade-ul-item.brand {
  width: 243px;
}
.cascade-ul-item.brand.first {
  width: 243px;
  margin-top: 43px;
}
.cascade-ul-item::after {
  font-family: element-icons;
  content: "\e604";
  font-size: 14px;
  color: #bfcbd9;
  position: absolute;
  right: 15px;
}
</style>

<script>
import '@/style/common.scss'
import '@/style/info.scss'
import { api } from '@/api'
import { devBaseURL } from '@/utils/http'
import { HTTPSUCCESS, HTTPDATAFAIL, HTTPPARAMFAIL, HTTPUNKOWNFAIL } from '@/components/constant'
import { getToken } from '@/utils/auth'
import { joinArray } from '@/utils/tool'

export default {
  data() {
    return {
      brandName: null,
      brandItemClass: -1,
      seriesItemClass: -1,
      modelItemClass: -1,
      seriesFlag: false,
      modelFlag: false,
      colorFlag: false,
      checkedColors: [],
      brandList: [],
      seriesList: [],
      modelList: [],
      colorList: [],
      checkAll: false,
      isIndeterminate: true
    }
  },
  props: {
    checkedCar: {
      type: Object,
      default: () => { }
    },
    modifyCar: {
      type: Object,
      default: () => { }
    }
  },
  created() {
    this.getBrandList()
    this.initialized()
  },
  watch: {
    modifyCar: {
      handler: function() {
        this.initialized()
      }
    }
  },
  methods: {
    joinArray,
    handleCheckAllChange(val) {
      this.checkedColors = val ? this.colorList : []
      this.isIndeterminate = false
    },
    initialized() {
      if (this.modifyCar && this.modifyCar.relateId) {
        this.$http.post(api.SYS_cAR_FAMILY, this.modifyCar).then(
          res => {
            this.brandList = res.data.brandList ? res.data.brandList.sort((a, b) => { if (a.brandId === this.modifyCar.brandId) return -1 }) : []
            this.seriesList = res.data.seriesList ? res.data.seriesList.sort((a, b) => { if (a.seriesId === this.modifyCar.seriesId) return -1 }) : []
            this.modelList = res.data.modelList ? res.data.modelList.sort((a, b) => { if (a.modelId === this.modifyCar.modelId) return -1 }) : []
            this.colorList = res.data.colorList
            this.checkedColors = this.modifyCar.colorList ? this.modifyCar.colorList : []
            this.checkedCar.modelId = this.modifyCar.modelId
            this.checkedCar.colors = this.modifyCar.colors
            this.$emit('update:checkedCar', this.checkedCar)
            this.brandItemClass = 0
            this.seriesItemClass = 0
            this.modelItemClass = 0
            this.seriesFlag = true
            this.modelFlag = true
            this.colorFlag = true
          }
        )
      }
    },
    getBrandList() {
      const params = {
        brandName: this.brandName
      }
      this.$http.get(api.SYS_CITY_CARBRANDS, params).then(
        res => {
          this.brandList = res.data
        }
      )
    },
    chooseBrand(item, index) {
      if (this.brandItemClass !== index) {
        this.$http._get(api.SYS_CITY_CARSERIES, item.brandId).then(
          res => {
            this.seriesList = res.data
          }
        )
        this.brandItemClass = index
        this.seriesFlag = true
        this.seriesItemClass = -1
        this.modelFlag = false
        this.colorFlag = false
      }
    },
    chooseSeries(item, index) {
      if (this.seriesItemClass !== index) {
        this.$http._get(api.SYS_CITY_CARMODELS, item.seriesId).then(
          res => {
            this.modelList = res.data
          }
        )
        this.seriesItemClass = index
        this.modelFlag = true
        this.modelItemClass = -1
        this.colorFlag = false
      }
    },
    chooseModel(item, index) {
      if (this.modelItemClass !== index) {
        this.checkedCar.modelId = item.modelId
        this.$emit('update:checkedCar', this.checkedCar)
        this.colorList = this.modelList.filter(e => e.modelId === item.modelId)[0].colorsJson
        this.modelItemClass = index
        this.colorFlag = true
      }
    },
    checkedColor(colors) {
      this.checkedCar.colors = joinArray(colors)
      this.$emit('update:checkedCar', this.checkedCar)
      const checkedCount = colors.length
      this.checkAll = checkedCount === this.colorList.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.colorList.length
    }
  }
}
</script>
